<template>
  <div class="app-search-header">
    <van-nav-bar title="标题" left-arrow @click-left="$router.back()">
      <template #right>
        <van-button type="primary" size="small">搜索</van-button>
      </template>
      <template #title>
        <van-search
          shape="round"
          placeholder="请输入搜索关键词"
          @update:model-value="handleInput"
          :model-value="text"
        />
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  text: string;
}
defineProps<IProps>();

const emit = defineEmits<{
  (e: "update:text", val: string): void;
}>();

const handleInput = (val: string) => {
  emit("update:text", val);
};
</script>

<style lang="scss">
.app-search-header {
}
</style>
